import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getTransferRecordList } from './service'
import TableTitle from '@/components/TableTitle';

export default () => {
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义金额单元格
  const amount = (text: any, record: ColumnsItem) => [
    <p
      key='amount'
      style={{ textAlign: 'right', margin: 0 }}
    >
      {typeof record.txAmt === 'number' ? record.txAmt.toFixed(6) : null}
    </p>
  ]

  // 币种单元格
  const ccy = (text: any, record: ColumnsItem) => [
    <span
      key='ccy'>
      {record.ccy}
    </span >
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'txAmt1' ? item.render = amount : undefined
    item.dataIndex === 'txAmt2' ? item.render = amount : undefined
    item.dataIndex === 'txAmt3' ? item.render = amount : undefined
    item.dataIndex === 'ccy1' ? item.render = ccy : undefined
    item.dataIndex === 'ccy2' ? item.render = ccy : undefined
    item.dataIndex === 'ccy3' ? item.render = ccy : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='转账交易' />}
        columns={columns}
        actionRef={actionRef}
        request={async params => {
          console.log(params);

          let res = await getTransferRecordList({ ...params, pageNum: params.current });
          console.log(res);

          return {
            data: res.body.list,
            total: res.body.total
          }
        }}
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'transferRecordList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="txNo"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
    </div>
  );
};